<!--<template>
  <mu-paper class="fottomNav">
    <mu-bottom-nav :value="bottomNav" shift @change="handleChange">
      <mu-bottom-nav-item value="首页" title="首页" icon="home" to="/vue-home/dist"/>
      <mu-bottom-nav-item value="信息" title="信息" icon="voicemail" to="/vue-home/dist/message"/>
      <mu-bottom-nav-item value="我的" title="我的" icon="person_pin" :to="person_path"/>
      <mu-bottom-nav-item value="更多" title="更多" icon="more_horiz" to="/vue-home/dist/more"/>
    </mu-bottom-nav>
  </mu-paper>
</template>-->

<template>
  <mu-paper class="fottomNav">
    <mu-bottom-nav :value="bottomNav" @change="handleChange">
      <mu-bottom-nav-item value="首页" title="首页" icon="home" to="/vue-home/dist"/>
      <mu-bottom-nav-item value="信息" title="信息" icon="voicemail" to="/vue-home/dist/message"/>
      <mu-bottom-nav-item value="我的" title="我的" icon="person_pin" :to="person_path"/>
      <mu-bottom-nav-item value="更多" title="更多" icon="more_horiz" to="/vue-home/dist/more"/>
    </mu-bottom-nav>
  </mu-paper>
</template>

<script>
export default {
  data () {
    return {
      bottomNav: 'movies',
      bottomNavColor: 'movies'
    }
  },
  created() {
      this.facthData()
  },
  watch: {
      '$router' : 'facthData'
  },
  methods: {
    handleChange (val) {
      this.bottomNav = val
    },
    facthData(){
        let accesstoken = localStorage.getItem("accesstoken")
        if (accesstoken) {
          this.person_path = '/vue-home/dist/my'
        } else {
          this.person_path = '/vue-home/dist/login'
        }
        if (this.$route.path === '/vue-home/dist') {
          this.bottomNav = '首页'
        }
        if (this.$route.path === '/vue-home/dist/message') {
          this.bottomNav = '信息'
        }
        if (this.$route.path === '/vue-home/dist/login' || this.$route.path === '/vue-home/dist/my') {
          this.bottomNav = '我的'
        }
        if (this.$route.path === '/vue-home/dist/more') {
          this.bottomNav = '更多'
        }
    }
  }
}
</script>
<style scoped lang="scss">
    .fottomNav{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .bottomNav .mu-bottom-nav-shift-wrapper {
    display: flex;
    justify-content: space-around;
  }
</style>